var _in = document.querySelector('.in');    //获取登录按钮
var _code = document.querySelector('.code');//获取整个验证码框
var oImg = document.querySelector('.img'); //获取放背景图、验证码的框框
var _bg = document.querySelector('.bg');    //获取

_in.onclick = function () {          //点击登录后显示验证码框
    _bg.style.zIndex = 100;
    _bg.style.background = 'rgba(0, 0, 0, .7)';
    _code.style.opacity = 1;
    _code.style.height = 410 + 'px';
    oImg.style.height = 320 + 'px';
}

// ----------------------------------------------------------------------

// 图文验证的功能

// 1 初始化功能:      提示语 生成文字 背景图

// 2 删除验证框功能:  删除当前验证框，初始化一遍 内容重新渲染

// 3 刷新功能:       初始化一遍 内容重新渲染

// 4 确定功能:       判断1 点击的次数跟文字的长度是否相等 相等进入第二步判断  判断2 绑定下标的数组  点击文字后获取下标的数组值 是否相等

// 新增回退功能   点错了可撤销


// 写初始化里面的 跟写初始化外面的



var textArr = ['一帆风顺', '无双', '安慕希', '四海八荒', '五福临门', '七星高照', '八仙过海', '九牛一毛']; //验证码为点击词语文字

// 背景图片路径
var imgArr = [
    {
        _url: 'url(./1.png) no-repeat'
    },
    {
        _url: 'url(./2.png) no-repeat'
    },
    {
        _url: 'url(./3.png) no-repeat'
    },
    {
        _url: 'url(./4.png) no-repeat'
    },
    {
        _url: 'url(./5.gif) no-repeat'
    },
    {
        _url: 'url(./6.png) no-repeat'
    },
    {
        _url: 'url(./7.png) no-repeat'
    },
    {
        _url: 'url(./8.png) no-repeat'
    },
];

var _dic = '引丑巴孔队办以允予劝双书幻玉刊示末未击打巧正扑扒功扔去甘世古节本术可丙左厉右石布龙平灭轧东卡北占业旧帅归且旦目叶甲申叮电号田由史只央兄叼叫另叨叹四生失禾丘付仗代仙们仪白仔他斥瓜乎丛令用甩印乐句匆册犯外处冬鸟务包饥主市立闪兰半汁汇头汉宁穴它讨写让礼训必议讯记永司尼民出辽奶奴加召皮边发孕圣对台矛纠母幼丝式刑动扛寺吉扣考托老执巩圾扩扫地扬场耳共芒亚芝朽朴机权过臣再协西压厌在有百存而页匠夸夺灰达列死成夹轨邪划迈毕至此贞师尘尖劣光当早吐吓虫曲团同吊吃因吸吗屿帆岁回岂刚则肉网年朱先丢舌竹迁乔伟传乒乓休伍伏优伐延件任伤价份华仰限妹姑姐姓始驾参艰线练组细驶织终驻驼绍经贯奏春帮珍玻毒型挂封帘实试郎诗肩房诚衬衫视话诞询该详建肃录隶居届刷屈弦承孟孤陕降河沾泪油泊沿泡注泻泳泥沸波泼泽治怖性怕怜怪学宝宗定宜审宙官空京享店夜庙府底剂郊废净盲放刻育闸闹郑券卷单炒炊炕炎炉沫浅法泄斧爸采受乳贪念贫肤肺肢肿胀朋股肥服胁周昏鱼兔狐忽狗备饰饱饲变'; //混淆原文字

var alertText = document.querySelector('.text');         //设置提示文字

var oOk = document.querySelector('.right');          //获取确定按钮

var reset = document.querySelector('.iconfont');    //获取刷新按钮

var del = document.querySelector('.del');            //获取删除按钮

var good = document.querySelector('.good');         //获取 刷新结果


//点击登录后初始化验证框
var verifyArr = []; //存储成语的下标 
var clickArr = [];  //点击获取的下标
var randomText = null; //要用来判断 把随机生成的词语带出来
var space = null;       //创建space
var count = 0;      //记录点击的数量


// 初始化
start();


// 确定按钮点击 判断验证码是否正确
var f = true; //节流
oOk.onclick = function () {
    console.log(clickArr);
    console.log(verifyArr);
    if (f) {
        f = false;
        var p = setTimeout(function () {
            f = true;
            clearTimeout(p);
        }, 1600)
        if (count === randomText.length) {
            if (clickArr.join() === verifyArr.join()) {  //判断下标
                good.innerHTML = '验证成功'
                good.classList.add('over');

                var k = setTimeout(function () {
                    good.innerHTML = ''
                    good.classList.remove('over');
                    del.onclick();
                    clearTimeout(k);
                }, 1600)
            }
            else {
                _return();
            }
        }
        else {
            _return();
        }

        function _return() {
            good.innerHTML = '验证失败'
            good.classList.add('out');

            var timer = setTimeout(function () {
                good.innerHTML = ''
                good.classList.remove('out');
                removeFn();
                start();
                clearTimeout(timer);
            }, 1600)
        }
    }
}


//重置  删除数据 
var removeFn = function () {
    space.remove();
    count = 0;
    verifyArr = [];
    clickArr = [];
}


//  点击刷新验证码
var k = 0;
reset.onclick = function () {
    k++;
    if (k > 10) {
        alert('点击次数过多,请重试');
        k = 0
        del.onclick();
    }
    removeFn();
    start();
}


// 点击删除验证框
del.onclick = function () {
    removeFn();
    start();

    _code.style.opacity = 0;
    _bg.style.zIndex = 0;
    _code.style.height = 200 + 'px';
    oImg.style.height = 100 + 'px';
    _bg.style.background = 'none';
}


// 初始化 生成新数据
function start() {

    // 提示语放置
    randomText = textArr[rand(0, textArr.length)]; //获取一个随机的词语
    alertText.innerHTML = randomText;    //显示提示语


    // 生成随机背景图
    var randomImg = rand(0, imgArr.length);  //随机获取一个背景图库下标
    oImg.style.background = imgArr[randomImg]._url;      //生成背景图
    oImg.style.backgroundSize = '100% 100%';        //注意宽高



    // 插入一个盒子存放文字和点击的文字
    space = document.createElement('div');
    space.classList.add('space');
    oImg.appendChild(space);


    //绑定随机字下标
    for (var i in randomText) {
        verifyArr.push(i);     //添加字的下标
    }


    // 随机字的随机定位
    var fontPosition = randomText; //获取这个随机词的字符串
    var fontPosition = '';
    for (var i = 0; i < 5; i++) {
        fontPosition += _dic[rand(0, _dic.length)];
    }
    fontPosition = randomText + fontPosition;

    for (var i in fontPosition) {    //遍历字符串 安排字的随机位置
        var _left = rand(0, 280); //文字在随机空间的随机位置 得到的是数字 i乘得的结果不可以超过随机盒子的长宽
        var _top = rand(0, 280);
        var rotate = rand(-60, 60);


        var _span = document.createElement('span'); //创建一个节点为拆散的文字  如 '无' '双'
        _span.classList.add('font')                 //创建类名为font
        _span.innerHTML = fontPosition[i];                  //显示这个文字
        _span.setAttribute('index', i);           //为文字顺序添加下标
        _span.style.transform = `rotate(${rotate}deg)`

        _span.style.left = _left + 'px';            //安放文字位置
        _span.style.top = _top + 'px';
        space.append(_span);                         //在随机方框中生成随机文字
    }




    // 给字添加 点击绑定事件  点击文字变色
    var allFont = document.querySelectorAll('.font'); //获取词语中的字 伪数组
    allFont.forEach(function (v) {
        v.onclick = function () {
            clickArr.push(v.getAttribute('index'));  //点击文字 获取下标
            v.style.color = randColor();

        }
    })



// 点击生成小圆圈
    space.onclick = function (v) {
        if (v.target.className == 'radio') {
            // 如果顺序不对 点不动
            if (count > v.target.innerHTML * 1) {
                return
            }
            // 退回小圆圈 文字退回颜色
            var breakFont = document.querySelectorAll('#break');
            breakFont.forEach(function (v) {
                if (v.getAttribute('break') * 1 === count) {
                    v.style.color = 'gray';
                    v.removeAttribute('break');
                    clickArr.pop(v.getAttribute('index'));
                }
            })

            // 删除这个点击的小圆圈
            v.target.remove();
            count--;
            return
        }

        if (count === 10) {
            return;
        }

        count++;
        var _radio = document.createElement('div');                 //创建节点 点击一下生成
        _radio.classList.add('radio');
        _radio.innerHTML = count;                                   //显示点击的字
        _radio.style.left = v.x - _code.offsetLeft - 18 + 'px'; //设置光标点击位置
        _radio.style.top = v.y - _code.offsetTop - 48 + 'px';
        space.appendChild(_radio);                                    //背景图上插入这个小圆圈


        // 如果点击的是文字 给这个文字做标记 
        if (v.target.className == 'font') {
            v.target.getAttribute('break') && clickArr.pop(v.target.getAttribute('index'));
            v.target.setAttribute('break', count);
            v.target.id = 'break';
        }
    }

}













// 随机数
function rand(min, max) {
    return parseInt(Math.random() * (max - min) + min)
}


// //随机颜色
function randColor() {
    var r = rand(0, 256);
    var g = rand(0, 256);
    var b = rand(0, 256);
    return `rgb(${r},${g},${b})`
}
